<template>
	<view class="">
		<sub-tabnav :tabs="tabs" @change="changeIndex" :selectIndex="selectIndex" :scrollTop="scrollTop"></sub-tabnav>
		<view class="pd20_15">
			<block v-for="(value,key) in listData" :key="key">
				<view class="box pd16_15 flex alcenter mb16" style="position: relative;" @click="ToCourse(value)">
					<image mode="aspectFill" class="tuan-product-l"
						:src="value.cover"></image>
					<view class="btn-mini laber" v-if="value.type == 1">图文</view>
					<view class="btn-mini laber" v-else-if="value.type == 2">音频</view>
					<view class="btn-mini laber" v-else>视频</view>
					<view class="tuan-product-r pl15">
						<view class="ft14 ftw600 cl-main text-over2">{{value.name}}</view>
						<view class="mt16">
							<text class="ft12 cl-orange">¥</text>
							<text class="ft16 cl-orange ftw600" style="margin-left: 5px;">{{value.sell_price}}</text>
							<!-- <text class="ml15 ft12 cl-notice text-line">¥{{value.name}}</text> -->
						</view>
						<view class="mt16 flex space alcenter">
							<!-- <view class="ft12 cl-notice">2022-10-20</view> -->
						</view>
					</view>
				</view>
			</block>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				listData: [],
				tabs: [{
						name: '全部'
					},
					{
						name: '视频'
					},
					{
						name: '音频'
					},
					{
						name: '图文'
					},
				],
				selectIndex: 0,
				scrollTop: 0,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有数据了'
				},
				type: 0,
				keytext: '',
				page_size: 25,
				last_id: 0,
				page_no: 1,
			}
		},
		onLoad(e) {
			//console.log(111)
			if (e.selectIndex) {
				this.selectIndex = e.selectIndex * 1
			}
			this.status = 'more';
			this.getList();
			this.banners = uni.getStorageSync("config").banner
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.status = 'more';
			this.getList();
		},
		methods: {
			ToCourse(item) {
				uni.navigateTo({
					url: '/course/detail/index?id=' + item.id
				})
			},
			changeIndex(index) {
				this.selectIndex = index;
				this.type = this.tabs[index]
				// this.getdata()
			},
			getList() {
				this.$api.CourseApi.list({
					type: this.type,
					page_no: 1,
					page_size: this.page_size,
				}).then(res => {
					if (res.code == 1) {
						if (res.data.count > 0) {
							let list = res.data.lists;
							this.listData = this.reload ? list : this.listData.concat(list);
							this.reload = false;
							this.last_id = this.last_id + 1;
							if (res.data.count < this.last_id * this.page_size) {
								this.status = '';
							}
						} else {
							this.listData = [];
							this.contentText.contentdown = '没有数据'
							this.status = ''

						}

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/common/css/course.css");

	.tuan-product-l {
		width: 320rpx;
		height: 240rpx;
		border-radius: 16rpx;
		background: #F2F2F2;
	}

	.tuan-product-r {
		width: calc(100% - 320rpx);
	}

	.laber {
		position: absolute;
		top: 40upx;
		left: 280upx;
		border-radius: 10upx;
		font-size: 18upx;
		width: 60upx;
		height: 36upx;
		background: rgb(0, 198, 87);
		color: rgb(255, 255, 255);
		box-shadow: rgba(0, 198, 87, 0.3) 0px 4px 17px -4px;
	}
</style>